<template>
	<div class="equipmentDetail">
		<el-table :data="pageData.items" style="width: 100%">
			<el-table-column type="expand">
				<template slot-scope="props" >
					<el-form label-position="left" class="demo-table-expand" v-if="props.row.definitions && props.row.definitions.length > 0">
						<el-form-item :label="item.name" v-for="item in props.row.definitions">
							<span>{{ item.value }}</span>
						</el-form-item>
					</el-form>
					<div style="text-align: center;" v-else>暂无数据</div>
				</template>
			</el-table-column>
			<el-table-column label="装备名称" prop="equipmentName"></el-table-column>
			<el-table-column label="品牌" prop="equipmentBrand"></el-table-column>
			<el-table-column label="装备型号" prop="equipmentModel"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" size=" " class="isdelete" @click="deleteRow(scope.row)">删除</el-button>
					<el-button type="text" size=" " @click="editorRow(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryData: {
					equipmentRelationId: '',
					companyId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				pageData: ''
			}
		},
		mounted() {
			this.queryData.companyId = this.$store.state.company.companyId
		},
		methods:{
			getPageData(){
				// 获取详情数据queryEquipmentByType
				// this.queryData.equipmentRelationId = equipmentRelationId
				this.$request.postForm(this.$api.queryEquipmentByType, this.queryData).then(res=>{
					if(res.code == 200){
						this.pageData = res.data
						this.pageData.items.forEach(v=>{
						// console.log([eval(v.definitions)], '111111')
							
							if(v.definitions != '' && v.definitions != null){
								v.definitions = JSON.parse(v.definitions)
							}
						})
					}
				})
			},
			paginaClick(val) {
				this.queryData.page = val
				this.getPageData()
			},
			deleteRow(row) {
				// 删除
				this.$confirm('确认删除该装备?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.get(this.$api.removeEquipment, {
						id: row.id
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							if (this.queryData.page > 1) {
								this.queryData.page = Math.ceil((this.pageData.totalNum - 1) / $globalData.pageSize)
							}
							this.getPageData()
						}
					})
				})
			},
			editorRow(row){
				// 编辑装备
				this.$router.push(`/industrialist/working/equipmenteditor/${row.id}?iseditor=1`)
			}
		}
	}
</script>

<style scoped="scoped">
	.equipmentDetail>>>.demo-table-expand {
	    font-size: 0;
	  }
	  .equipmentDetail>>>.demo-table-expand label {
	    width: 90px;
		/* text-align: right; */
	    color: #A2A5A8;
		font-size: 12px;
		
	  }
	  .equipmentDetail>>>.demo-table-expand .el-form-item__content span {
	    /* width: 90px; */
	    color: #A2A5A8;
		font-size: 12px;
	  }
	  .equipmentDetail>>>.demo-table-expand .el-form-item {
	    margin-right: 0;
	    margin-bottom: 0;
	    width: 50%;
	  }
	  .equipmentDetail>>>.isdelete {
	  	color: #F42929;
	  }
</style>
